import 'package:flutter/material.dart';
import 'package:flutter_vant_ui/flutter_vant_ui.dart';

import '../../demos/demos.dart';

class VanDocDemoLayoutSection extends StatelessWidget {
  const VanDocDemoLayoutSection({super.key});

  static int count = 0;
  static const colors = [Color(0xff39a9ed), Color(0xff66c6f2)];

  Widget buildCol(BuildContext context, {required int span, int offset = 0, int index = 0}) {
    var text = "span: $span";
    if (offset > 0) text = "offset: $offset, $text";
    text = "[$index] $text";
    final childText = Container(
      width: double.infinity,
      color: colors[index % 2],
      child: Text(
        text,
        textAlign: TextAlign.center,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          color: kVanWhite.toColor(context),
          fontSize: 13,
          height: 30 / 13,
        ),
      ),
    );

    return VanCol(span: span, offset: offset, child: childText);
  }

  @override
  Widget build(BuildContext context) {
    count = 0;
    return Scaffold(
      appBar: AppBar(title: const Text("Layout")),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 40),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const VanDocDemoBlockTitle(title: "基础用法", paddingTop: 20, paddingLeft: 0),
              VanRow(children: List.generate(3, (index) => buildCol(context, span: 8, index: index))),
              const SizedBox(height: 10),
              VanRow(children: [
                buildCol(context, span: 4),
                buildCol(context, span: 10, offset: 4, index: 1),
              ]),
              const SizedBox(height: 10),
              VanRow(children: [buildCol(context, span: 12, offset: 12)]),

              ///
              const VanDocDemoBlockTitle(title: "在列元素之间增加间距", paddingTop: 20, paddingLeft: 0),
              VanRow(gutter: 10, children: List.generate(3, (index) => buildCol(context, span: 8, index: index))),
              const VanDocDemoBlockTitle(title: "在列元素之间增加间距(不换行)", paddingTop: 20, paddingLeft: 0),
              VanRow(gutter: 10, wrap: false, children: List.generate(4, (index) => buildCol(context, span: 8, index: index))),

              ///
              const VanDocDemoBlockTitle(title: "垂直间距(bug-fixing)", paddingTop: 20, paddingLeft: 0),
              VanRow(gutter: 10, children: List.generate(4, (index) => buildCol(context, span: 12, index: index))),

              //
              const VanDocDemoBlockTitle(title: "对齐方式", paddingTop: 20, paddingLeft: 0),
              VanRow(justify: WrapAlignment.center, children: List.generate(4, (index) => buildCol(context, span: 6, index: index))),
              const SizedBox(height: 10),
              VanRow(justify: WrapAlignment.center, children: List.generate(3, (index) => buildCol(context, span: 6, index: index))),
              const SizedBox(height: 10),
              VanRow(justify: WrapAlignment.end, children: List.generate(3, (index) => buildCol(context, span: 6, index: index))),
              const SizedBox(height: 10),
              VanRow(justify: WrapAlignment.spaceBetween, children: List.generate(3, (index) => buildCol(context, span: 6, index: index))),
              const SizedBox(height: 10),
              VanRow(justify: WrapAlignment.spaceAround, children: List.generate(3, (index) => buildCol(context, span: 6, index: index))),
            ],
          ),
        ),
      ),
    );
  }
}
